<template>
  <div id="app">
    <div class="con_wrap" :style="bgImg" >
      <homeHeader @changeShow="change($event)" v-if="$route.meta.show"/>
      <div v-else>
        <blogHeader/>
        <blogNav/>
      </div>
      <transition name="fade">
        <homeNav v-show="toggle"  v-if="$route.meta.show"/>
      </transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      <homeFooter v-if="$route.meta.show"/>
      <blogFooter/>
    </div>
    
  </div>
</template>

<script>
import homeHeader from "./components/home/home-header/homeHeader";
import homeNav from "./components/home/home-nav/home-nav";
import blogHeader from "./components/blog/blog-header/blogHeader";
import blogNav from "./components/blog/blog-header/blogNav"
import homeFooter from "./components/home/home-footer/homeFooter"
import blogFooter from "./components/blog/footer/blogFooter"
// import {mapState} from "vuex"
export default {
  name: "App",
  data() {
    return {
      toggle: null,
    };
  },
  components: {
    homeHeader,
    homeNav,
    blogHeader,
    homeFooter,
    blogFooter,
    blogNav
  },
  computed: {
    // ...mapState(["isShow"]),
    bgImg() {
      let randIndex = Math.floor(Math.random() * 8);
      let pic = require(`./assets/img/${randIndex}.jpg`);
      return {
        pic,
        background: `url(${pic}) center top/cover fixed`
      };
    }
  },
  methods: {
    change(show) {
      this.toggle = show;
    }
  },
};
</script>

<style lang="less">
@import "assets/css/font.css";
@import "assets/css/reset.css";
#app {
  min-height: 640px;
  // user-select: none;
}
.fade-enter,
.fade-leave-to {
  transform: translateX(100%);
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.5s;
}
</style>
